<template>
  <div class="search-fun">
    <div class="search-title">
      <div class="search-back" @click="toclassification"></div>
      <van-search v-model="value" placeholder="搜索菜谱" @input="searchfoot" />
      <div class="search-cancel search-ok" v-if="value == ''" @click="toclassification">取消</div>
      <div class="search-confirm search-ok" v-if="value != ''" @click="footlist">搜索</div>
    </div>

    <div class="body-not" v-if="value == ''">
      <div class="record">
        <div class="record-img"></div>
        <span class="record-text">历史搜索</span>
      </div>
      <div class="record-history">
        <div class="clearauto" v-for="item in history" :key="item.id">
          <div class="history-text" @click="getfootlist(item)">{{ item }}</div>
        </div>
      </div>
      <div class="history-clear" @click="clearlist">
        <div class="clear-img"></div>
        <span>清除历史搜索</span>
      </div>
    </div>

    <div class="body-have" v-if="isYes && value != ''">
      <div class="foot-type">
        <van-tabs v-model="active" color="#ffbf00">
          <van-tab title="按菜名"></van-tab>
          <van-tab title="按食材"></van-tab>
        </van-tabs>
      </div>
      <ul v-for="(item, index) in searchresults" :key="index">
        <li @click="haveinformation">{{ item }}</li>
      </ul>
    </div>

    <div class="body-foot" v-if="!isYes && value != ''">
      <div class="foot-type">
        <van-tabs v-model="active" color="#ffbf00" @click="bainhua">
          <van-tab title="按菜名"></van-tab>
          <van-tab title="按食材"></van-tab>
        </van-tabs>
      </div>
      <ul v-for="value in footmenu" :key="value.id">
        <li @click="$router.push(`/videodetail/${value.id}`)">
          <div class="foot-list-img">
            <img :src="`http://pic.angelboy.cn/web/${value.imageid}.jpg`" alt="" />
          </div>
          <div class="foot-list-text">
            <p class="information1">{{ value.name }}</p>
            <p class="information2">{{ value.user.nickname }}</p>
            <p class="information2">
              <span>点赞 {{ value.infos.likeCount }}</span
              ><span>收藏 {{ value.infos.collectionCount }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request/request'

export default {
  data() {
    return {
      value: '',
      isYes: false,
      searchtype: 'title',
      history: [],
      searchresults: [],
      active: 0,
      footmenu: []
    }
  },

  methods: {
    toclassification() {
      if (this.value != '') {
        this.value = ''
      } else {
        this.$router.push('/classification')
        this.isYes = false
      }
    },
    clearlist() {
      this.history = []
    },
    async searchfoot() {
      const {
        data: { list: res }
      } = await request.get('/public/prompt.shtml', {
        params: {
          queryString: this.value
        }
      })
      this.searchresults = res
      this.isYes = true
    },
    async footlist() {
      this.isYes = false
      const {
        data: { list: res }
      } = await request({
        url: '/public/searchRecipe.shtml',
        method: 'post',
        data: {
          appid: 'cn.bakeshipu',
          queryString: this.value,
          type: this.active == 0 ? 'title' : 'material'
        }
      })
      this.footmenu = res
      if (this.history.indexOf(this.value) == -1) {
        this.history.push(this.value)
      }
    },
    async getfootlist(value) {
      this.isYes = false
      this.value = value
      const {
        data: { list: res }
      } = await request({
        url: '/public/searchRecipe.shtml',
        method: 'post',
        data: {
          appid: 'cn.bakeshipu',
          queryString: value,
          type: this.active == 0 ? 'title' : 'material'
        }
      })
      this.footmenu = res
    },
    async bainhua() {
      this.footmenu = []
      const {
        data: { list: res }
      } = await request({
        url: '/public/searchRecipe.shtml',
        method: 'post',
        data: {
          appid: 'cn.bakeshipu',
          queryString: this.value,
          type: this.active == 0 ? 'title' : 'material'
        }
      })
      this.footmenu = res
      if (this.history.indexOf(this.value) == -1) {
        this.history.push(this.value)
      }
    },
    async haveinformation(e) {
      this.value = e.target.innerHTML
      this.isYes = false
      const {
        data: { list: res }
      } = await request({
        url: '/public/searchRecipe.shtml',
        method: 'post',
        data: {
          appid: 'cn.bakeshipu',
          queryString: this.value,
          type: this.active == 0 ? 'title' : 'material'
        }
      })
      this.footmenu = res
      if (this.history.indexOf(this.value) == -1) {
        this.history.push(this.value)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-fun {
  .search-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-back {
      width: 18px;
      height: 18px;
      // height: 20px;
      margin-left: 10px;
      font-weight: 800;
      background-image: url('@/assets/home/tt_lefterbackicon_titlebar_for_dark.png');
      background-size: cover;
    }

    .van-search {
      flex: 1;
      padding: 6px 12px;

      .van-search__content {
        border-radius: 999px;
      }
    }

    .search-ok {
      color: #999;
      width: 40px;
      font-size: 12px;
      text-align: center;
    }
  }

  .body-not {
    margin-top: 10px;
    padding: 0 10px;
    overflow: hidden;

    .record {
      width: 100%;
      height: 25px;
      overflow: hidden;

      .record-img {
        width: 15px;
        height: 15px;
        background-image: url('@/assets/home/e857368aecc1f31d2fba2c4481be6a1.png');
        background-size: cover;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
      }

      .record-text {
        color: #9e9e9e;
        font-size: 13px;
        line-height: 25px;
      }
    }

    .record-history {
      overflow: hidden;

      .clearauto {
        width: 100%;

        .history-text {
          width: auto;
          height: 25px;
          border-radius: 5px;
          padding: 8px;
          background-color: #f2f2f2;
          margin-right: 10px;
          float: left;
          line-height: 10px;
          font-size: 13px;
          margin-top: 5px;
        }
      }
    }

    .history-clear {
      width: 110px;
      height: 20px;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 30px;

      .clear-img {
        width: 18px;
        height: 20px;
        background-image: url('@/assets/additional/icon_homepage_search_delete.png');
        background-size: cover;
        float: left;
        margin-right: 5px;
      }

      span {
        color: #9e9e9e;
        font-size: 14px;
        float: left;
      }
    }
  }

  .body-have {
    .foot-type {
      width: 150px;
      margin: 0 auto;
    }

    ul {
      padding: 0 10px;

      li {
        width: 100%;
        font-size: 13px;
        margin: 15px 0;
        color: #494949;
      }
    }
  }

  .body-foot {
    .foot-type {
      width: 150px;
      margin: 0 auto;
    }

    ul {
      padding: 0 10px;

      li {
        width: 100%;
        height: 80px;
        margin-bottom: 20px;

        .foot-list-img {
          width: 70px;
          height: 70px;
          border-radius: 10px;
          background-color: black;
          float: left;
          margin-top: 10px;
          margin-right: 10px;
          border-radius: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 10px;
          }
        }

        .foot-list-text {
          width: 250px;
          float: left;

          .information1 {
            width: 100%;
            font-size: 13px;
            color: #494949;
            margin-bottom: 10px;
            margin-top: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .information2 {
            width: 100%;
            font-size: 12px;
            color: #9e9e9e;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
